
<template>
<div>
<div>
  <json-excel
    class = "export-excel-wrapper"
    :data = "value"
    :fields = "json_fields"
    name = "filename.xls">
    <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
    <el-button type="primary" size="small">导出EXCEL</el-button>
</json-excel>

<input-excel @getResult="getMyExcelData"></input-excel>
</div>
<div>
   <el-table
    :data="value"
    style="width: 100%">
    <el-table-column
      type="index"
      >
    </el-table-column>
    <el-table-column
      prop="日期"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="姓名"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="性别"
      label="性别">
    </el-table-column>
  </el-table>
  <!-- <table class="el-table el-table--fit el-table--border table-detail">
    <thead class='head'>
        <tr>
            <th>序号</th>
            <th>日期</th>
            <th>姓名</th>
            <th>性别</th>
            <th>职业</th>
            <th>地址</th>
        </tr>
    </thead>
    <tbody class='body'>
        <tr v-for="cm in value" :key='cm.序号'>
            <td v-text="cm.序号"></td>
            <td v-text="cm.日期"></td>
            <td v-text="cm.姓名"></td>
            <td v-text="cm.性别"></td>
            <td v-text="cm.职业"></td>
            <td v-text="cm.地址"></td>
        </tr>
    </tbody>
</table> -->
    
  
</div>
</div>


</template>
<script>
import JsonExcel from 'vue-json-excel'
import Storage from '../model/storage'
import inputExcel from '../model/excel-model'
 export default{
data(){
return{
  value:'',
  excel:[],
  json_fields: {
    type:[xls, csv,xlsx]
  }
}
 },
components:{
   inputExcel ,
   JsonExcel
 },
  mounted() {
    //var list = JSON.parse(localStorage.getItem('key'));
    var excel = Storage.get('excel');
    if (excel) {
      this.value = excel
    }
  },
methods:{
  getMyExcelData(data) {
    // data 为读取的excel数据，在这里进行处理该数据
    this.value=data
    Storage.set('excel',this.value)
    console.log(data)
    console.log(this.value)

  }
 }
}


</script>

<style scoped>
.body{
  height: 500px;
}

</style>